 <!-- 商家认证 -->
 <template>
 	<view class="shop-container">
 		<block-view>
 			<view class="auth-desc">
 				上传资质证明，解锁专业商户身份，成为 See Wow 认证商户，方便收益流程。发布活动即刻彰显卓越专业度。（我们承诺对您的资料进行严格保密，只作为认证凭证）
 			</view>
 		</block-view>
		<block-view >
			<view class="form-item" style="padding-top: 0;">
				<uni-section title-font-size="30rpx" type="line" title="请填写商户信息"></uni-section>
				<view class="ipt-item">
					<text class="name">商户名称</text>
					<input class="ipt" type="text" v-model="formData.name" placeholder="请填写营业执照上的名称" />
				</view>
				<view class="ipt-item top-distance">
					<text class="name">营业执照号</text>
					<input class="ipt" type="text" v-model="formData.business_cert_no" placeholder="请填写营业执照上的执照号" />
				</view>
				<view class="upload-item">
					<view class="name">上传营业执照</view>
					<image-upload @change="imageChange" :image-arr="formData.business_cert_img ? [formData.business_cert_img] : []"></image-upload>
				</view>
			</view>
		</block-view>
		<block-view padding-top="0">
			<view class="form-item">
				<uni-section title-font-size="30rpx" type="line" title="请填写联系人信息"></uni-section>
				<view class="ipt-item">
					<text class="name">姓名</text>
					<input class="ipt" type="text" v-model="formData.contacts" placeholder="请填写联系人姓名" />
				</view>
				<view class="ipt-item top-distance">
					<text class="name">身份证号</text>
					<input class="ipt" type="text" v-model="formData.id_card" maxlength="18" placeholder="请填写联系人身份证号" />
				</view>
				<view class="ipt-item top-distance no-border">
					<text class="name">手机号</text>
					<input class="ipt" type="number" :maxlength="11" v-model="formData.mobile" placeholder="请填写联系人手机号" />
				</view>
			</view>
		</block-view>
		<block-view padding-top="0">
			<view class="form-item">
				<uni-section title-font-size="30rpx" type="line" title="请填写银行卡信息"></uni-section>
				<view class="ipt-item">
					<text class="name">银行卡号</text>
					<input class="ipt" type="text" v-model="formData.bank_no" placeholder="请填写银行卡号" />
				</view>
				<view class="ipt-item top-distance no-border">
					<text class="name">预留手机号</text>
					<input class="ipt" type="number" :maxlength="11" v-model="formData.bank_mobile" placeholder="请填写银行预留手机号" />
				</view>
				<view class="ipt-item top-distance no-border">
					<text class="name">开户银行</text>
					<input class="ipt" type="text" :maxlength="50" v-model="formData.bank_name" placeholder="请填写开户银行信息(x银行x支行)" />
				</view>
			</view>
		</block-view>
 	</view>
	<fixed-footer>
		<primary-btn title="提交" :disabled="btnDisabled" @btnClick="check()"></primary-btn>
	</fixed-footer>
	
	<uni-popup ref="checkPopup" type="center" :is-mask-click="false">
		<view class="popup-content">
			<view class="info-wrapper">
				<image class="check-white" src="/static/images/check-white.svg" mode="widthFix"></image>
				<view class="info">
					<view class="info-item">
						<view class="name">商户名称</view>
						<view class="text">{{ formData.name }}</view>
					</view>
					<view class="info-item">
						<view class="name">营业执照号</view>
						<view class="text">{{ formData.business_cert_no }}</view>
					</view>
					<view class="info-item">
						<view class="name">联系人</view>
						<view class="text">{{ formData.contacts }}</view>
					</view>
					<view class="info-item">
						<view class="name">身份证号</view>
						<view class="text">{{ formData.id_card }}</view>
					</view>
					<view class="info-item">
						<view class="name">联系人手机</view>
						<view class="text">{{ formData.mobile }}</view>
					</view>
					<view class="info-item">
						<view class="name">银行卡号</view>
						<view class="text">{{ formData.bank_no }}</view>
					</view>
					<view class="info-item">
						<view class="name">银行预留手机</view>
						<view class="text">{{ formData.bank_mobile }}</view>
					</view>
					<view class="info-item">
						<view class="name">开户银行</view>
						<view class="text">{{ formData.bank_name }}</view>
					</view>
				</view>
			
				<view class="btn-wrapper">
					<view class="left-btn" hover-class="tap-hover" @click="$popupChange(this, 'checkPopup')">我要修改</view>
					<view class="right-btn" hover-class="tap-hover" @click="submit()">确认无误并提交</view>
				</view>
			</view>
		</view>
	</uni-popup>
 </template>
 
 <script>
	import { validateIDCard, validatePhoneNumber } from '../../common/utils'
	import requestConfig from '../../network/config'
	import { useUserStore } from '../../store/userStore'
 	export default {
 		data() {
 			return {
				userStore: useUserStore(),
 				formData: {
					name: '',
					business_cert_no: '',
					business_cert_img: '',
					contacts: '',
					id_card: '',
					mobile: '',
					bank_no: '',
					bank_name: '',
					bank_mobile: ''
				},
				business_cert_img: '',
				auth_id: 0,
				isEdit: false, // 是否是编辑
				// checkBg: `url(${requestConfig.imageUrl}x5j_file/static/check-bg.png)`,
				checkBg: `url(${requestConfig.imageUrl}x5j_file/2025-03-05/174116483567c81123ea4b6.png)`,
 			}
 		},
		computed: {
			btnDisabled() {
				let b = false
				for (let key in this.formData) {
					if (this.formData.hasOwnProperty(key)) {
						if (!this.formData[key]) {
							b = true
						}
					}
				}
				return b
			}
		},
		onLoad(options) {
			if (options.isEdit) {
				this.getShopDetail()
			}
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('modifyShopInfo', (data) => {
				this.isEdit = true
				this.auth_id = data.id
				for (let key in this.formData) {
					if (this.formData.hasOwnProperty(key)) {
						this.formData[key] = data[key]
					}
				}
			})
		},
 		methods: {
			check() {
				this.$refs.checkPopup.open()
			},
 			imageChange(images) {
				this.formData.business_cert_img = images != false ? images[0] : ''
			},
			async submit() {
				const { mobile, bank_mobile, id_card } = this.formData
				if (!validatePhoneNumber(mobile)) {
					uni.showToast({
						title: '联系人手机号格式不正确',
						icon: 'none'
					})
					return
				}
				if (!validateIDCard(id_card)) {
					uni.showToast({
						title: '身份证号码格式不正确',
						icon: 'none'
					})
					return
				}
				if (!validatePhoneNumber(bank_mobile)) {
					uni.showToast({
						title: '银行预留手机号格式不正确',
						icon: 'none'
					})
					return
				}
				const res = await this.$request.post('api/merchant_cert/create', this.formData)
				if (res.code == 200) {
					uni.showToast({
						title: '已提交，资料审核中',
						icon: 'none'
					})
					//修改本地存储数据
					user
					uni.$emit('updateUserInfo')
					setTimeout(() => {
						const delta = this.isEdit ? 2 : 1
						uni.navigateBack({
							delta: delta
						})
					}, 1600)
				}
			},
			// 获取商户认证详情
			async getShopDetail() {
				const res = await this.$request.get('api/merchant_cert/detail')
				if (res.code == 200) {
					const data = res?.data || {}
					this.auth_id = data?.id || 0
					for (let key in this.formData) {
						if (this.formData.hasOwnProperty(key)) {
							this.formData[key] = data[key]
						}
					}
				}
			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
 	.shop-container {
		padding: 16rpx 30rpx;
		padding-bottom: 200rpx;
		
		.auth-desc {
			font-size: 26rpx;
			color: #7B7B7B;
			line-height: 44rpx;
		}
		.form-item{
			padding-top: 24rpx;
		}
		.ipt-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0 40rpx;
			font-size: 30rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			.name {
				font-weight: 500;
			}
			.ipt {
				width: calc(100% - 210rpx);
				text-align: right;
				color: #444;
				font-size: 28rpx;
			}
		}
		.top-distance {
			padding-top: 40rpx;
		}
		.no-border {
			border-bottom: none;
		}
		.upload-item {
			margin-top: 40rpx;
			.name {
				font-size: 30rpx;
				font-weight: 500;
				margin-bottom: 30rpx;
			}
		}
	}

	.popup-content {
		width: 632rpx;
		height: 964rpx;
		background-image: v-bind(checkBg);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 190rpx 30rpx 0;
		.info-wrapper {
			width: 100%;
			
			.check-white {
				width: 100%;
			}
			.info {
				background-color: #fff;
				width: 100%;
				padding: 0 30rpx;
				position: relative;
				// height: 400rpx;
				margin-top: -20rpx;
				border-radius: 0 0 24rpx 24rpx;
				.info-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 38rpx;
					.name {
						font-size: 26rpx;
						font-weight: 500;
					}
					.text {
						font-size: 24rpx;
						color: #7B7B7B;
						text-align: right;
					}
				}
			}
			
			.btn-wrapper {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 40rpx;
				font-size: 32rpx;
				.left-btn {
					width: 250rpx;
					height: 72rpx;
					text-align: center;
					line-height: 72rpx;
					border: 3rpx solid $uni-color-primary;
					border-radius: 36rpx;
					color: $uni-color-primary;
				}
				.right-btn {
					width: calc(100% - 276rpx);
					height: 72rpx;
					text-align: center;
					line-height: 72rpx;
					background-color: $uni-color-primary;
					border-radius: 36rpx;
					color: #fff;
				}
			}
		}
	}
 </style>